import wsAPI from "@/app/[language]/site/lib/wsAPI";
import { useSiteStore } from "@/state/Stores";
import CryptoJS from "crypto-js";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { Button, Col, Input, Modal, Row } from "reactstrap";

const EventPB = require("@/Event_pb");

export default observer(() => {
  const { isLogInOpened, setLogInOpened } = useSiteStore();
  const t = useTranslations();

  const [avatarID, setAvatarID] = useState("");
  const [avatarCipher, setAvatarCipher] = useState("");
  const [autoLogIn, setAutoLogIn] = useState(false);

  const onLogIn = () => {
    if (autoLogIn) {
      window.localStorage.setItem("avatarID", avatarID);
      window.localStorage.setItem(
        "avatarCipher",
        CryptoJS.AES.encrypt(
          avatarCipher,
          "591A6F91-2A27-4A88-88FA-0FEB7CB5FD94",
        ).toString(),
      );
    }
    window.localStorage.setItem("autoLogIn", autoLogIn.toString());
    wsAPI.send({
      eventID: EventPB.Event.EventID.LOG_IN,
      text: JSON.stringify({ avatarID, avatarCipher }),
    });
  };

  return (
    <Modal isOpen={isLogInOpened} toggle={() => setLogInOpened(false)} centered>
      <Row className="g-0">
        <Col className="m-1">
          <Input
            value={avatarID}
            onChange={({ target: { value } }) => {
              setAvatarID(value);
            }}
            placeholder={t("logInID")}
          />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1">
          <Input
            value={avatarCipher}
            onChange={({ target: { value } }) => {
              setAvatarCipher(value);
            }}
            type="password"
            placeholder={t("logInCipher")}
            onKeyDown={({ key }) => {
              if (key === "Enter") {
                onLogIn();
              }
            }}
          />
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Button color="success" onClick={onLogIn}>
            {t("logIn")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color={autoLogIn ? "success" : "danger"}
            onClick={() => {
              setAutoLogIn((prevState) => !prevState);
            }}
          >
            {t("autoLogIn")}
          </Button>
        </Col>
      </Row>
    </Modal>
  );
});